<template>
	<view>
		<view>

			<view class="top"></view>

			<view class="bg-basic basic">
				<view class="basic-title">请完善住院患者信息</view>
				<view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">申请类型</view>
						</view>
						<view>
							<u-radio-group v-model="form.type">
								<u-radio name='1'>本人办理</u-radio>
								<u-radio name='2'>代理人办理</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">患者姓名</view>
						</view>
						<view>
							<input v-model="form.patName" maxlength="5" placeholder="请填写患者姓名" />
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">身份证号</view>
						</view>
						<view>
							<input v-model="form.centId" maxlength="18" placeholder="请填写身份证号码" />
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">住院号</view>
						</view>
						<view>
							<input v-model="form.inHospitalNo" placeholder="请填写住院号" />
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">入院时间</view>
						</view>
						<view @click="showInHospital=true">
							{{form.inHospitalTime?form.inHospitalTime:'选择入院时间'}}
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">出院时间</view>
						</view>
						<view @click="showOutHospital=true">
							{{form.outHospitalTime?form.outHospitalTime:'选择出院时间'}}
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">手机号码</view>
						</view>
						<view class="start-center">
							<input v-model="form.patPhone" maxlength="11" style="width: 100px;" placeholder="请填写手机号" />
							<view class="btn">获取号码</view>
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">验证码</view>
						</view>
						<view class="start-center">
							<input v-model="form.code" maxlength="6" placeholder="请填写验证码" />
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">联系地址</view>
						</view>
						<view class="start-center">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
								<view class="uni-input"
									:style="{color: form.province === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
									{{regionName || '点击选择省市区'}} &gt;
								</view>
							</pick-regions>
						</view>
					</view>
					<view class="border-row">
						<view class="start-center">
							<view class="color-red">*</view>
							<view class="form-title">详细地址</view>
						</view>
						<view class="start-center">
							<input type="text" v-model="form.patAddress" placeholder="请输入街道、小区、门牌号等" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="form.type==2" class="bg-basic">
			<view class="basic-title">请完善代理人信息</view>
			<view>
				<view class="border-row">
					<view class="start-center">
						<view class="color-red">*</view>
						<view class="form-title flex-1">与本人关系</view>
					</view>
					<view @click="showRelation=true">
						{{form.relation?form.relation+'>':'请选择关系>'}}
					</view>
				</view>
				<view class="border-row">
					<view class="start-center">
						<view class="color-red">*</view>
						<view class="form-title">代办人姓名</view>
					</view>
					<view>
						<input v-model="form.relationName" maxlength="5" placeholder="请填写代办人姓名" />
					</view>
				</view>
				<view class="border-row">
					<view class="start-center">
						<view class="color-red">*</view>
						<view class="form-title">代办人身份证号</view>
					</view>
					<view>
						<input v-model="form.relationCertId" maxlength="18" placeholder="请填写代办人身份证号码" />
					</view>
				</view>

				<view class="border-row">
					<view class="start-center">
						<view class="color-red">*</view>
						<view class="form-title">代办人手机</view>
					</view>
					<view class="start-center">
						<input v-model="form.relationPhone" maxlength="11" placeholder="请填写代办人手机号" />
					</view>
				</view>
			</view>
		</view>
		<ButtonAllVue btn-r="下一步" @click="next"></ButtonAllVue>
		<u-calendar v-model="showInHospital" :mode="mode" @change="changeInHospitalTime"></u-calendar>
		<u-calendar v-model="showOutHospital" :mode="mode" @change="changeOutHospitalTime"></u-calendar>
		<u-select v-model="showRelation" :list="listRelation" @confirm="changeRelation"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ButtonAllVue from '../../../../components/Button/ButtonAll.vue';
	import PickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		props: {
			step: Number,
			form: Object
		},
		components: {
			ButtonAllVue,
			PickRegions
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.form.region.map(item => item.name).join('-')
			},
		},
		data() {
			return {
				region: [],
				showInHospital: false,
				showOutHospital: false,
				showRelation: false,
				mode: 'date',
				listRelation: [{
						value: '父母',
						label: "父母"
					},
					{
						value: '子女',
						label: "子女"
					},
					{
						value: '其他',
						label: "其他"
					}
				],
				defaultRegionCode: '510107',
			}
		},
		methods: {
			handleGetRegion(region) {
				this.form.region = region
				this.form.province = region[0].name
				this.form.city = region[1].name
				this.form.district = region[2].name
			},
			changeInHospitalTime(e) {
				this.form.inHospitalTime = e.result;
			},
			changeOutHospitalTime(e) {
				let inDate = new Date(this.form.inHospitalTime)
				let outDate = new Date(e.result)
				if (inDate.getTime() >= outDate.getTime()) {
					this.$refs.uToast.show({
						title: '出院日期不能小于入院日期',
						type: 'warning',
					})
					return
				}
				this.form.outHospitalTime = e.result;
			},
			changeRelation(e) {
				this.form.relation = e[0].value
			},
			next() {
				this.$emit('updateStep', {
					step: 2,
					name: '申请内容',
					active: false,
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		margin-left: 50%;
		width: 183px;
		height: 121px;
		background-image: url("/static/images/imgs/medicalRecordCopy-top.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.basic {
		margin-top: -50px;
	}

	.bg-basic {
		background-image: url("/static/images/imgs/medicalRecordCopy-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20px;
	}

	.basic-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 20px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.border-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 40px;
		padding: 10px 0 0 0;
		border-bottom: 1px solid rgb(204, 204, 204);
	}

	.form-title {
		/* width: 80px; */
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 14px;
		/* line-height: 40px; */
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	uni-input {
		text-align: right;

		.uni-input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.24);
		}
	}

	.btn {
		color: white;
		background-color: rgb(61, 194, 234);
		padding: 0 10px;
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
		width: 80px;
		text-align: center;
	}
</style>